<template>
  <div>
   <h2>Provide/inject:{{a}}</h2>
    <button @click="a++">改变a</button>
    <Child/>
    <hr>
  </div>
</template>

<script>
import Child from "./Child"
export default {
    name:"Props",
    components:{
        Child
    },
    data(){
        return{
            a:1,
            b:2,
            c:3
        }
    },
    methods: {
        changeA(num){
            this.a+=num
        }
    },
      /* provide对象写法 */
  /* provide: {
    count: 0,
  }, */

  /* provide函数写法 */
  provide() {
    return {
      a: this.a,
      b: this.b,
      c: this.c,
      changeA: this.changeA,
    };
  },
}
</script>

<style scoped>
.grandson{
    background: yellowgreen;
}
</style>